api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md:88

• The Angular module import was changed to DxDataGridModule, but this Common Types page still uses {WidgetName}/{widget-name} placeholders elsewhere. Keeping this file generic (placeholders) avoids mixing hard-coded DataGrid API with templated snippets.

    import { DxDataGridModule } from 'devextreme-angular';

    @NgModule({
        declarations: [
            AppComponent

api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md:107

• The Vue example hard-codes but still imports from 'devextreme-vue/{widget-name}'. This mix of hard-coded component names with placeholders makes the snippet invalid as written. Keep the example placeholder-based (or update both tags and import path consistently).

        <DxDataGrid ... >
            <DxColumn ...
                data-type="date"
                :calculate-filter-expression="calculateFilterExpression">
                <DxHeaderFilter

api-reference/40 Common Types/15 grids/ColumnHeaderFilter/groupInterval.md:139

• The React example now uses the DataGrid component but still imports from 'devextreme-react/{widget-name}'. This mismatch makes the snippet invalid as written. Keep the example placeholder-based (or update both component name and import path consistently).

    import { DataGrid, Column, HeaderFilter } from 'devextreme-react/{widget-name}';

    function calculateFilterExpression (value, operation, target) {
        if(value && target === "headerFilter") {
            return [this.dataField, operation, value];